<template>
	<view class="allhw">
		<view class="bg-grey im-emoji-changebar tui-flex tui-align-right">
			<view class="tui-col-1  tui-center " @click="tabDeaf = true">
				<tui-icon name="imface" :size="20" :color="tabDeaf ? ' #4caf50' : '#333'" :bold="tabDeaf"></tui-icon>
			</view>
			<view class="tui-col-1 margin-right tui-center " @click="tabDeaf = false">
				<tui-icon name="like" :size="20" color="#333" :color="!tabDeaf ? ' #4caf50' : '#333'" :bold="!tabDeaf"></tui-icon>
			</view>
		</view>
		<tui-divider height="5" dividerColor="#969696"></tui-divider>
		<scroll-view scroll-y="" class="im-emoji">
			<!-- 默认表情 -->
			<view v-if="tabDeaf" class="animation-slide-left">
				<tui-grid unlined>
					<block v-for="(item, index) in emojiList" :key="index">
						<tui-grid-item backgroundColor="#eeeeee" @click="selectEmoji(index)">
							<view class="tui-flex tui-center"><image class="im-emoji-img" :src="`/static/${item}`" :key="index" /></view>
						</tui-grid-item>
					</block>
				</tui-grid>
			</view>
			<view v-else class="animation-slide-right tui-flex padding-lg">
				<image class="im-emoji-img-like " src="/static/add.png" ></image>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import emoji from './im-emoji.js';
export default {
	props: {
		inpMessage: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			cellCount: 5,
			tabDeaf: true,
			emojiList: emoji.obj
		};
	},
	methods: {
		selectEmoji(index) {
			let value = this.inpMessage + index;
			this.$emit('selectEmoji', value);
		}
	},
	created() {}
};
</script>

<style scoped>
.im-emoji-changebar {
	height: 60rpx;
	width: 100%;
}
.im-emoji {
	height: 440rpx;
	width: 100%;
	padding-bottom: 40rpx;
}
.im-emoji-img {
	height: 50rpx;
	width: 50rpx;
}
.im-emoji-img-like{
	height: 15vw;
	width: 15vw;
}
</style>
